<template>
    <div class="gentle-content-wrapper">
        <div class="gentle-content-wrapper-center">
            <div class="gentle-content-wrapper-content" >
                <div class="components-input-demo-size">
                    <span>关键词</span>
                    <a-input placeholder="请输入关键字搜索" />
                    <a-button type="primary">
                        提交 </a-button>
                </div>
                <div style="margin-top: 8px;  background-color: #FFFFFF; width: 100%;height: 89%;overflow-y: auto;">
                    <a-row style="margin-top: 8px;" v-for="(item, index) in colorList" :key="index">
                        <a-col v-for="(i, j) in item" :key="j" :style="i.style" :span="i.number">{{ i.number }}</a-col>
                    </a-row>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
// 规定推入栅栏
let colorList = [{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 1
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 5
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 4
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},
{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
},{
    one: {
        style: {
            'background-color': 'blue'
        },
        number: 10
    },
    two: {
        style: {
            'background-color': 'bisque'
        },
        number: 11
    },
    three: {

        style: {
            'background-color': 'brown'
        },
        number: 3
    }
}

]
</script>
<style lang="less" scoped>
.components-input-demo-size {
    padding: 8px 8px;
    background-color: #FFFFFF;
}

.components-input-demo-size .ant-input {
    width: 200px;
    margin: 0px 8px 0px 8px;
}
</style>